<template>
    <LayoutWrap id="alipay">
        <ul class="list-head">
            <li class="list-head-item">
                <el-button
                    @click="$router.push({name: ACCOUNT_ALIPAY_TRANSCACTIONS})"
                    type="primary"
                    style="min-width: 212px"
                    ><i class="el-icon-upload2"></i>上传支付宝交易记录明细</el-button
                >
            </li>
            <li class="list-head-item">
                <el-button
                    @click="$router.push({name: ACCOUNT_ALIPAY_TRANSCACTIONS_HISTORY})"
                    type="primary"
                    style="min-width: 212px"
                    ><i class="iconfont icon-icon_history" style="font-size: inherit;"></i
                    >上传支付宝交易记录明细历史列表</el-button
                >
            </li>
        </ul>

        <el-tabs value="alipayRecord" type="card">
            <el-tab-pane label="支付宝交易记录明细列表查询" name="alipayRecord">
                <el-form @submit.native.prevent ref="formSearch" :inline="true" :model="formSearch" label-width="80px">
                    <div class="search-wrap">
                        <div class="search-item left">
                            <el-form-item label="交易时间">
                                <template v-if="selectMenu === 'CustomTime'">
                                    <el-date-picker
                                        type="date"
                                        placeholder="选择日期"
                                        format="yyyy.MM.dd"
                                        value-format="yyyy-MM-dd"
                                        prefix-icon="false"
                                        v-model="formSearch.startDate"
                                        :clearable="false"
                                        class="custom-the-datepicker"
                                        style="width: 88px;margin-right: 5px;"
                                    ></el-date-picker>
                                    <el-time-select
                                        prefix-icon="false"
                                        placeholder="起始时间"
                                        v-model="formSearch.startTime"
                                        class="custom-the-datepicker"
                                        style="width: 60px;"
                                        :clearable="false"
                                        :picker-options="{
                                            start: '00:00',
                                            step: '01:00',
                                            end: '24:00'
                                        }"
                                    >
                                    </el-time-select>
                                    <span style="display: inline-block; padding: 0 5px;">-</span>
                                    <el-date-picker
                                        type="date"
                                        placeholder="选择日期"
                                        format="yyyy.MM.dd"
                                        value-format="yyyy-MM-dd"
                                        prefix-icon="false"
                                        v-model="formSearch.startDate"
                                        :clearable="false"
                                        class="custom-the-datepicker"
                                        style="width: 88px;margin-right: 5px;"
                                    ></el-date-picker>
                                    <el-time-select
                                        prefix-icon="false"
                                        placeholder="起始时间"
                                        v-model="formSearch.startTime"
                                        class="custom-the-datepicker"
                                        style="width: 60px; margin-right: 5px;"
                                        :clearable="false"
                                        :picker-options="{
                                            start: '00:00',
                                            step: '01:00',
                                            end: '24:00'
                                        }"
                                    >
                                    </el-time-select>
                                </template>
                                <el-select
                                    v-model="selectMenu"
                                    class="custom-the-select_time"
                                    :class="selectMenu"
                                    :popper-class="`custom-the-select-popper_time ${selectMenu}`"
                                    placeholder="请选择"
                                    :popper-append-to-body="false"
                                >
                                    <el-option
                                        v-for="item in menuOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="search-item right">
                            <el-form-item label="交易状态">
                                <el-select v-model="formSearch.status" placeholder="请选择" style="width: 120px;">
                                    <el-option
                                        v-for="item in statusOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="search-wrap">
                        <div class="search-item left">
                            <el-form-item label="关键词">
                                <el-select
                                    class="custom-the-select_key"
                                    popper-class="custom-the-select-popper_key"
                                    v-model="formSearch.keyName"
                                    placeholder="请选择"
                                    style="width: 105px;margin-right: 10px;"
                                >
                                    <el-option
                                        v-for="item in keyOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                                <el-input v-model="formSearch.keyValue" style="width: 180px"></el-input>
                            </el-form-item>
                        </div>

                        <div class="search-item right">
                            <el-form-item label="时间类型">
                                <el-select v-model="formSearch.dateTime" placeholder="请选择" style="width: 120px;">
                                    <el-option
                                        v-for="item in dateTimeOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="search-wrap">
                        <div class="search-item left">
                            <el-form-item label="金额范围">
                                <el-input v-model="formSearch.amountRangeStart" style="width: 105px;"></el-input>
                                <span style="display: inline-block; margin: 0 15px">-</span>
                                <el-input v-model="formSearch.amountRangeEnd" style="width: 105px;"></el-input>
                            </el-form-item>
                        </div>
                        <div class="search-item right">
                            <el-form-item label="资金流向">
                                <el-select v-model="formSearch.capitalFlows" placeholder="请选择" style="width: 120px;">
                                    <el-option
                                        v-for="item in capitalFlowsOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </div>

                    <div class="search-wrap">
                        <div class="search-item left">
                            <el-form-item label="交易方式">
                                <el-checkbox-group v-model="formSearch.transaction">
                                    <el-checkbox label="SecuredTransactions">担保交易</el-checkbox>
                                    <el-checkbox label="InstantArrival">即时到账</el-checkbox>
                                    <el-checkbox label="CashOnDelivery">货到付款</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                        </div>
                        <div class="search-item right">
                            <el-form-item label="交易分类">
                                <el-select
                                    v-model="formSearch.transactionClass"
                                    placeholder="请选择"
                                    style="width: 120px;"
                                >
                                    <el-option
                                        v-for="item in transactionClassOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="search-wrap">
                        <div class="search-item left">
                            <el-form-item label="  ">
                                <el-button type="primary" style="min-width: 120px;">查询</el-button>
                                <el-button type="default" style="min-width: 120px;">重置</el-button>
                            </el-form-item>
                        </div>
                    </div>
                </el-form>
                <ul class="list-head">
                    <li class="list-head-item">
                        <CheckedColumns
                            :checkedId="checkedId"
                            :dataSource="checkedOpts"
                            v-model="checkedValues"
                        ></CheckedColumns>
                    </li>
                </ul>
                <el-table :data="tableData" border>
                    <el-table-column key="selection" type="selection" width="45"> </el-table-column>
                    <template v-for="item in columnData">
                        <el-table-column
                            v-if="checkedValues.includes(item.prop)"
                            :key="item.key"
                            :prop="item.prop"
                            :label="item.label"
                        ></el-table-column>
                    </template>
                </el-table>
                <Pagination
                    :page-size.sync="formSearch.pageSize"
                    :page.sync="formSearch.page"
                    :total="formSearch.count"
                    @change="onChangePage"
                />
            </el-tab-pane>
            <el-tab-pane label="支付宝账户查询" name="alipayAccount"> </el-tab-pane>
        </el-tabs>
    </LayoutWrap>
</template>
<script>
import {mapGetters} from 'vuex';
import CheckedColumns from '@/components/CheckedColumns';
import {THE_CHECKED_ALIPAY} from '@/utils/list-types';
import getObjKeys from '@/views/account/alipay/getObjKeys';
import getCheckedColumns from '@/views/account/getCheckedColumns';
import {ACCOUNT_ALIPAY_TRANSCACTIONS, ACCOUNT_ALIPAY_TRANSCACTIONS_HISTORY} from '@/router/route-name';
export default {
    name: 'alipay',
    components: {
        CheckedColumns
    },
    data() {
        return {
            ACCOUNT_ALIPAY_TRANSCACTIONS,
            ACCOUNT_ALIPAY_TRANSCACTIONS_HISTORY,
            uploadKey: 'alipay',
            objKeys: getObjKeys(),
            tableData: [],
            columnData: [],
            checkedValues: [
                'FundingStatus',
                'SuccessfulRefund',
                'IncomeOrExpenditure',
                'tradingStatus',
                'ServiceFee',
                'TransactionNumber',
                'Remarks',
                'PaymentTime',
                'BusinessOrderNumber'
            ], // 默认选中的
            checkedOpts: getCheckedColumns(getObjKeys()), // 需要选择的数据[{}, {label: '', value: ''}]
            checkedId: THE_CHECKED_ALIPAY,
            formSearch: {
                startDate: new Date(),
                startTime: '00:00',
                keyName: 'SerialNumber',
                keyValue: '',
                amountRangeStart: '',
                amountRangeEnd: '',
                transaction: [],
                dateTime: 'CreationTime',
                status: '1', // 交易状态
                capitalFlows: '1',
                transactionClass: '1',
                count: 0, // 总条数
                pageSize: 10, // 一页多少条
                page: 1 // 当前第几页
            },
            selectMenu: 'LastWeek',
            menuOptions: [
                {label: '今天', value: 'Today'},
                {label: '最近一周', value: 'LastWeek'},
                {label: '最近一个月', value: 'LastMonth'},
                {label: '最近三个月', value: 'LastThreeMonths'},
                {label: '自定义时间', value: 'CustomTime'}
            ],
            keyOptions: [
                {label: '流水号', value: 'SerialNumber'},
                {label: '交易信息', value: 'TradingInformation'},
                {label: '对方名称', value: 'CounterpartyName'}
            ],
            dateTimeOptions: [
                {label: '创建时间', value: 'CreationTime'},
                {label: '付款时间', value: 'PaymentTime'},
                {label: '收款时间', value: 'CollectionTime'}
            ],
            statusOptions: [
                {label: '所有状态', value: '1'},
                {label: '进行中', value: '2'},
                {label: '等待付款', value: '3'},
                {label: '等待发货', value: '4'},
                {label: '等待确认收货', value: '5'},
                {label: '退款', value: '6'},
                {label: '成功', value: '7'},
                {label: '失败', value: '8'},
                {label: '退款待处理', value: '9'},
                {label: '等待买家签收', value: '10'},
                {label: '等待签收确认', value: '11'},
                {label: '等待系统打款给卖家', value: '12'},
                {label: '维权', value: '13'}
            ],
            capitalFlowsOptions: [
                {label: '全部', value: '1'},
                {label: '收入', value: '2'},
                {label: '支出', value: '3'}
            ],
            transactionClassOptions: [
                {label: '全部', value: '1'},
                {label: '购物', value: '2'},
                {label: '线下', value: '3'},
                {label: '理财', value: '4'},
                {label: '转账', value: '5'},
                {label: '还款', value: '6'},
                {label: '缴费', value: '7'},
                {label: '充值', value: '8'},
                {label: '提现', value: '9'},
                {label: '还贷款', value: '10'},
                {label: '手机充值', value: '11'}
            ]
        };
    },
    created() {
        const newObj = this.objKeys;

        this.columnData = Object.keys(newObj).map(item => ({key: newObj[item], prop: newObj[item], label: item}));
    },
    methods: {
        onChangePage(value) {
            this.formSearch = {...this.formSearch, ...value};
            this.getList();
        },
        getList() {
            console.log('getList');
        },
        handleError(error) {
            console.log('error', error);
            this.$message({message: error, type: 'error'});
        },
        handleSuccess({results, header}) {
            this.uploadKey = Math.random();
            const newObj = this.objKeys;

            this.tableData = results.map(item => {
                const newChild = {};
                Object.keys(item).forEach(child => {
                    newChild[newObj[child]] = item[child];
                });
                return newChild;
            });
        }
    }
};
</script>
<style lang="scss">
.custom-the-select-popper_time {
    position: absolute;
    left: -1px !important;
    width: 100px !important;
    .el-select-dropdown__item {
        padding-left: 10px;
        padding-right: 10px;
    }
}
.custom-the-select-popper_key {
    .el-select-dropdown__item {
        padding-left: 10px;
        padding-right: 10px;
    }
}
.custom-the-select-popper_time.CustomTime {
    position: absolute;
    left: -325px !important;
    width: 361px !important;
}
</style>
<style lang="scss" scoped>
.custom-the-datepicker,
.custom-the-select_time,
.custom-the-select_key {
    ::v-deep {
        .el-input__inner {
            padding-left: 10px;
            padding-right: 10px;
        }
    }
}
.custom-the-select_time {
    width: 105px;
}
.custom-the-select_time.CustomTime {
    ::v-deep {
        .el-input__inner {
            color: #fff;
        }
    }
}
.custom-the-select_time.CustomTime {
    width: 35px;
}

.search-wrap {
    display: flex;
    flex-flow: row wrap;
    .search-item.left {
        min-width: 455px;
    }
}
</style>
